<template>
  <div class="flowTab">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane
        v-for="item in componentList"
        :key="item.type"
        lazy
        :label="item.name"
        :name="item.type"
      >
        <Suspense>
          <!-- 具有深层异步依赖的组件 -->
          <component :is="currentComponent" :data="componentData" />
          <!-- 在 #fallback 插槽中显示 “正在加载中” -->
          <template #fallback> Loading... </template>
        </Suspense>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { defineAsyncComponent, ref } from 'vue';
const activeName = ref('component');
const componentList = [
  {
    name: '组件资源',
    type: 'component',
  },
  {
    name: '网络资源',
    type: 'network',
  },
  {
    name: '设计模板',
    type: 'design',
  },
  {
    name: '场景资源',
    type: 'scenes',
  },
];
const componentData = ref(null);
const currentComponent = defineAsyncComponent(() => import('./mainAside.vue'));
</script>
<style scoped lang="scss">
.flowTab {
  //width: 388px;
  //background-color: #e9e9e9;
  height: 100%;
  box-shadow: 8px 0 12px rgba(0, 0, 0, 0.12);
  .el-tabs {
    :deep(.el-tabs__header) {
      width: 100%;
      border-bottom: 1px solid var(--el-border-color-light) !important;
      margin-bottom: 0;

      .el-tabs__nav {
        border-radius: unset;
        border-right: unset;
      }
    }
  }
}
</style>
